<template>
    <admin-framework :breadcrumb="breadcrumb" :title="breadcrumb.title">
        <panel class="panel-default" title="角色列表">
            <advanced-table :head="head" :insert="insertRole" class="table-hover table-bordered">
                <tr v-for="(role, index) in roles" :key="index" :data-id="role.id" :data-name="role.name">
                    <td>{{role.id}}</td>
                    <td>{{role.name}}</td>
                    <td>{{role.display_name}}</td>
                    <td>{{role.description}}</td>
                    <td>
                        <switch-i :disabled="true" :value="role.can_delete"/>
                    </td>
                    <td>
                        <switch-i :disabled="true" :value="role.is_default"/>
                    </td>
                    <td>{{role.flag}}</td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <button class="fa fa-edit btn btn-success" @click="editClick"></button>
                            <button class="btn btn-info fa fa-info" @click="infoClick"></button>
                            <button class="btn btn-danger fa fa-trash-o" v-show="role.can_delete"
                                    @click="deleteClick"></button>
                        </div>
                    </td>
                </tr>
            </advanced-table>
        </panel>
        <load-animation :load="load" :timeout="5000"/>
        <modal title="Add Role" :show="addModal" :onsubmit="addModalSubmit">
            <input-label type="text" v-model="addData.name" label="Name"/>
            <input-label type="text" v-model="addData.display_name" label="Display Name"/>
            <input-label type="text" v-model="addData.description" label="Description"/>
            <input-label type="number" v-model="addData.flag" label="Flag" pl="范围 0-60"/>
            <div class="form-group">
                <label>Can Delete ?</label>
                <switch-i v-model="addData.can_delete"/>
            </div>
        </modal>
        <modal title="Edit Role" :show="editModal" :onsubmit="editModalSubmit">
            <input-label type="text" v-model="editData.name" label="Name" :disabled="true"/>
            <input-label type="text" v-model="editData.display_name" label="Display Name"/>
            <input-label type="text" v-model="editData.description" label="Description"/>
            <input-label type="number" v-model="editData.flag" label="Flag" pl="范围 0-60"/>
            <div class="form-group">
                <label class="btn-block">Permission</label>
                <label v-for="(p, i) in permissions" :key="i" class="m-r-25">
                    <input type="checkbox" v-model="editData.perms" :value="p.id" :id="p.name"/>
                    {{p.display_name}}
                </label>
            </div>
        </modal>
    </admin-framework>
</template>

<script>
	/* eslint-disable no-undef */

	import AdminFramework from '../../layout/framework/AdminFramework';
	import Panel from 'vue-fiu-ui/src/main/js/components/panel/FoldPanel';
	import AdvancedTable from 'vue-fiu-ui/src/main/js/components/table/AdvancedTable';
	import SwitchI from 'vue-fiu-ui/src/main/js/components/switch/Switch';
	import LoadAnimation from 'vue-fiu-ui/src/main/js/components/animation/Loading';
	import Modal from 'vue-fiu-ui/src/main/js/components/widget/Modal';
	import InputLabel from 'vue-fiu-ui/src/main/js/components/input/InputLabel';

	export default {
		components: {
			InputLabel,
			Modal,
			LoadAnimation,
			SwitchI,
			AdvancedTable,
			Panel,
			AdminFramework
		},
		data () {
			return {
				breadcrumb: {
					title: '用户角色',
					links: [
						{
							label: 'Home',
							url: {name: 'Home'}
						}, {
							end: true,
							label: 'Role',
							url: '#'
						}
					]
				},
				head: [
					{label: '#'},
					{label: 'Name'},
					{label: 'Display Name'},
					{label: 'Description'},
					{label: 'Can Delete'},
					{label: 'Default ?'},
					{label: 'Flag'},
					{label: 'Action'}
				],
				roles: [],
				load: false,
				addModal: false,
				addData: {
					name: undefined,
					display_name: undefined,
					description: undefined,
					can_delete: true,
					is_default: false,
					flag: undefined
				},
				editModal: false,
				editData: {},
				permissions: []
			};
		},
		methods: {
			initRoles () {
				this.load = true;
				axios.get('/admin/user/role').then(res => {
					this.roles = res.data.data;
					this.load = false;
				});
			},
			insertRole () {
				this.addModal = false;
				this.$nextTick(() => {
					this.addModal = true;
				});
			},
			initPermission () {
				axios.get('/admin/user/permission').then(res => {
					this.permissions = res.data.data;
				});
			},
			addModalSubmit () {
				axios.post('/admin/user/role', this.addData).then(res => {
					if (res.data.success === false) return this.$notify.error(res.data.data);
					this.initRoles();
					this.$notify.success(res.data.data);
					this.addModal = false;
				});
			},
			editClick (e) {
				let data = this.$util.getTrData(e);
				this.initPermission();
				axios.get('/admin/user/role/' + data.id).then(res => {
					if (res.data.success === false) return this.$notify.error(res);
					let role = res.data.data;
					let perms = [];
					role.perms.forEach((item) => {
						perms.push(item.id);
					});
					role.perms = perms;
					this.editData = role;
					console.info(this.editData);
					this.editModal = false;
					this.$nextTick(() => {
						this.editModal = true;
					});
				});
			},
			editModalSubmit () {
				axios.put('/admin/user/role/' + this.editData.id, this.editData).then(res => {
					if (res.data.success === false) return this.$notify.error(res.data.data);
					this.editModal = false;
					this.$notify.success(res.data.data);
				});
			},
			infoClick (e) {
				let data = this.$util.getTrData(e);
				axios.get('/admin/user/role/' + data.id).then(res => {
					if (res.data.success === false) return this.$notify.error(res.data.data);
					let role = res.data.data;
					let content = '';
					role.perms.forEach((item) => {
						content += `<p class="text-warning">${item.display_name}</p>`;
					});
					this.$modal.open({
						title: role.name,
						content: content
					}, (el, ml) => {
						ml.modal('hide');
					});
				});
			},
			deleteClick (e) {
				let data = this.$util.getTrData(e);
				this.$modal.open({
					title: '是否删除',
					content: data.name + '?'
				}, (el, ml) => {
					ml.modal('hide');
					axios.delete('/admin/user/role/' + data.id).then(res => {
						if (res.data.success === false) return this.$notify.error(res.data.data);
						this.initRoles();
						this.$notify.success(res.data.data);
                    });
				});
			}
		},
		mounted () {
			this.initRoles();
		}
	};
</script>

<style scoped>

</style>
